<template>
	<div class="page_wrap">
		<div class="card_box">
			<div class="card">
				<div class="c_head">
					<div class="h_left">
						<span>消息队列</span>
					</div>
					<div class="h_right">
						<i class="el-icon-setting"></i>
						<i class="el-icon-refresh"></i>
					</div>
				</div>
				<div class="c_main">
					<el-alert title="成功提示的文案" type="success">
					</el-alert>
					<el-alert title="消息提示的文案" type="info">
					</el-alert>
					<el-alert title="警告提示的文案" type="warning">
					</el-alert>
					<el-alert title="错误提示的文案" type="error">
					</el-alert>
				</div>
			</div>

			<div class="card">
				<div class="c_head">
					<div class="h_left">
						<span>消息队列</span>
					</div>
					<div class="h_right">
						<i class="el-icon-setting"></i>
						<i class="el-icon-refresh"></i>
					</div>
				</div>
				<div class="c_main">
					<el-alert title="成功提示的文案" type="success" effect="dark">
					</el-alert>
					<el-alert title="消息提示的文案" type="info" effect="dark">
					</el-alert>
					<el-alert title="警告提示的文案" type="warning" effect="dark">
					</el-alert>
					<el-alert title="错误提示的文案" type="error" effect="dark">
					</el-alert>
				</div>
			</div>

			<div class="card">
				<div class="c_head">
					<div class="h_left">
						<span>消息队列</span>
					</div>
					<div class="h_right">
						<i class="el-icon-setting"></i>
						<i class="el-icon-refresh"></i>
					</div>
				</div>
				<div class="c_main">
					<template>
						<el-alert title="不可关闭的 alert" type="success" :closable="false">
						</el-alert>
						<el-alert title="自定义 close-text" type="info" close-text="知道了">
						</el-alert>
						<el-alert title="设置了回调的 alert" type="warning" @close="hello">
						</el-alert>
					</template>
				</div>
			</div>

			<div class="card">
				<div class="c_head">
					<div class="h_left">
						<span>消息队列</span>
					</div>
					<div class="h_right">
						<i class="el-icon-setting"></i>
						<i class="el-icon-refresh"></i>
					</div>
				</div>
				<div class="c_main">
					<template>
						<el-alert title="成功提示的文案" type="success" show-icon>
						</el-alert>
						<el-alert title="消息提示的文案" type="info" show-icon>
						</el-alert>
						<el-alert title="警告提示的文案" type="warning" show-icon>
						</el-alert>
						<el-alert title="错误提示的文案" type="error" show-icon>
						</el-alert>
					</template>
				</div>
			</div>

			<div class="card">
				<div class="c_head">
					<div class="h_left">
						<span>消息队列</span>
					</div>
					<div class="h_right">
						<i class="el-icon-setting"></i>
						<i class="el-icon-refresh"></i>
					</div>
				</div>
				<div class="c_main">
					<template>
						<el-alert title="成功提示的文案" type="success" center show-icon>
						</el-alert>
						<el-alert title="消息提示的文案" type="info" center show-icon>
						</el-alert>
						<el-alert title="警告提示的文案" type="warning" center show-icon>
						</el-alert>
						<el-alert title="错误提示的文案" type="error" center show-icon>
						</el-alert>
					</template>
				</div>
			</div>

			<div class="card">
				<div class="c_head">
					<div class="h_left">
						<span>消息队列</span>
					</div>
					<div class="h_right">
						<i class="el-icon-setting"></i>
						<i class="el-icon-refresh"></i>
					</div>
				</div>
				<div class="c_main">
					<template>
						<el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
						</el-alert>
					</template>
				</div>
			</div>

			<div class="card">
				<div class="c_head">
					<div class="h_left">
						<span>消息队列</span>
					</div>
					<div class="h_right">
						<i class="el-icon-setting"></i>
						<i class="el-icon-refresh"></i>
					</div>
				</div>
				<div class="c_main">
					<template>
						<el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>
						</el-alert>
						<el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>
						</el-alert>
						<el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>
						</el-alert>
						<el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>
						</el-alert>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1, //当前页
				pageSize: 10, //每页大小
				total: 0, //数据总数
				tabHeight: 600,
			}
		},
		created() {},
		methods: {
			hello() {
				alert('Hello World!');
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page_wrap {
		padding: 10px;
	}
	
	.card_box {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.card {
			min-width: 500px;
			width: 32%;
			box-shadow: 1px 1px 10px #999;
			border-radius: 5px;
			margin: 0 10px 20px;
			.c_head {
				height: 40px;
				padding: 0 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #eee;
				box-sizing: border-box;
				.h_left {
					span {
						font-size: 16px;
					}
				}
				.h_right {
					i {
						font-size: 18px;
						cursor: pointer;
					}
				}
			}
			.c_main {
				height: 300px;
				padding: 10px;
			}
		}
	}
</style>